ARIA Tooltips

<button data-tooltip='<p>Your email address is required to verify your account, but will not be used for any other purpose.</p>'> Why do we need this? </button>

<label for="passwordId"> Password: </label>
<input data-tooltip="#passwordTooltipId" id="passwordId" type="password">

<div hidden id="passwordTooltipId">
    <p> Important! </p>
    <ul>
        <li> Must be 8 characters in length.</li>
        <li> Must not contain special characters.</li>
        <li> Must not contain any whitespace characters.</li>
    </ul>
</div>

<button data-tooltip="url/tooltips.php?type=help#tooltipContainerId"> What is this? </button>

<a class="hasTooltip" href="URL"> ONE </a>

<button class="hasTooltip"> TWO </button>

<input class="hasTooltip" type="text" title="THREE" >

var myTooltipDC = $A.setTooltip( domNodeOrCSSSelectorForTriggeringElement , {
  // Configure functionality key / value mappings
});

{

// Unique ID for the tooltip instance
id: "UniqueId",

// Optionally specify the tooltip container element within the same document.
// May be a DOM node or CSS selector.
// Not necessary if data-tooltip or data-error is set on the triggering element.
content: "#tooltipContainerId",

// Optionally specify the tooltip to be rendered when referencing external content.
// Not necessary if data-tooltip or data-error is set on the triggering element.
// If set, the content property will be auto-populated with the returned content.
fetch: {
url: "path/file.htm",
data: {
selector: "#tooltipContainerId"
}
},

// Optionally toggle the hidden attribute instead of inserting the tooltip content when rendered.
    toggleHide: true,

// Preload markup in the background when using the Fetch API to load external content.
preload: true,

// Preload images in the background when using the Fetch API to load external content.
preloadImages: true,

// Optionally specify if the tooltip is an alert message.
// If true, a system alert will be fired when the tooltip is rendered.
// As a general practice, tooltips and errors should never be alerts because this can interfere with speech announcement, so use with caution.
isAlert: false,

// Specify that the tooltip is an inline error message.
isError: false,

// Specify that the tooltip will only open when the triggering element receives focus, and not when moused over.
isFocusOnly: false,

// Specify that the tooltip will only open when the triggering element is clicked, and will close when clicked again.
isManualOpen: false,

// Specify that the tooltip will only close when the mouse leaves the tooltip instead of the triggering element.
// Necessary to pass some WCAG guidelines.
isManualClose: true,

// Specify that the tooltip will be displayed only when specific validation criteria are met when typing.
// Use when customized responses are needed to guide user input.
// Only valid on editable native input elements.
isResponsive: false,

// Set validation criteria to pass or fail as needed.
// Only applicable when isResponsive is set to true.
// Only valid on editable native input elements.
validate: function(DC, target) {
// 'target' is the input element to validate.
var val = target.value.toLowerCase();
// Set the DC.isValid property to track the state of validation.
DC.isValid = val.length > 0;
// Return the string to display as the tooltip if validation passes or failes.
if (DC.isValid) return "You typed something!";
else return "This field desires input.";
},

// Execute a handler every time validate is processed.
// Only applicable when isResponsive is set to true.
// Only valid on editable native input elements.
onValidate: function(DC, target) {
// Do something every time the target is updated.
document.querySelector('input[type="submit"]').disabled = !DC.isValid;
},

// Optionally specify a delay in milliseconds to wait before rendering the tooltip after the triggering element is activated.
delay: 0,

// Optionally specify a timeout length in milliseconds, after which the tooltip will automatically close.
delayTimeout: 0,

// Optionally override the default timeout function that occurs after the delayTimeout length is reached.
timeout: function(dc) {
// Do something...
dc.remove();
},

// Optionally specify a render and remove animation effect for the tooltip.
// Requires the "Animate" module import to function, which is powered by Velocity.js.
// To ignore animation effects, delete the animate object declaration entirely from the setup script.
// View implementations within "Templates/Tooltips" for practical animation usage examples.

style: { display: "none" }, // Set the initial state to hidden in prep for animation.

animate: {

onRender: function(dc, wrapper, next) {

// Specify the render animation effect, including the callback function statement to execute when the animation effect completes.
Velocity(wrapper, "transition.TYPE", {
// Velocity options here, plus the callback declaration after the animation completes.
complete: function() {
next(); // REQUIRED: next() must be executed so control is passed back to 4X for rendering.
}
});

},

onRemove: function(dc, wrapper, next) {

// Specify the removal animation effect, including the callback function statement to execute when the animation effect completes.
Velocity(wrapper, "transition.TYPE", {
// Velocity options here, plus the callback declaration after the animation completes.
complete: function() {
next(); // REQUIRED: next() must be executed so control is passed back to 4X for removal.
}
});

}

},

// Optionally run a script after the tooltip finishes rendering.
afterRender: function(DC) {
// DC.container includes the rendered tooltip content.
},

// Optionally run a script after the tooltip is removed.
afterRemove: function(DC) {
// Do something.
}

// Additional DC API properties and methods can be declared here also to customize functionality and behavior.
// To view available options, reference the help docs located at: "Help/DC API/DC Object Configuration"

}

// Use the DC object that is returned by the $A.setTooltip() function.

// Open the tooltip manually.
myTooltipDC.render(function() {
// Optionally do something after rendering completes.
});

// Close the tooltip manually.
myTooltipDC.remove(function() {
// Optionally do something after removal completes.
});

// Additional DC API properties and methods can be applied here as well.
// To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"